import React, { memo, useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  ImageBackground,
  Image,
  Animated,
  TouchableOpacity,
  Modal,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { LinearGradient } from "expo-linear-gradient";
import themeStore from "stores/theme";
import YText from "components/YText";
import YButton from "components/YButton";
import commonStyle from "utils/style";
import { p } from "utils/pxToDp";

const dataSource = [
  {
    img: require("assets/boy.png"),
    title: "Boy",
  },
  {
    img: require("assets/girl.png"),
    title: "Girl",
  },
];

const ChangeSex = (props: any) => {
  const theme = themeStore.theme;

  const [current, setCurrent] = useState(0);
  return (
    <LinearGradient
      colors={["#B4F3F8", "#BDF5F7", "#CCF7F9", theme.gradientm4]}
      locations={[0, 0.1, 0.2, 0.3]}
      style={{ flex: 1 }}
    >
      <SafeAreaView style={{ flex: 1 }}>
        <View style={[styles.pagewrapper]}>
          <YText color={theme.mainText} size={p(50)} bold>
            Hi,你的性别是？
          </YText>
          <View style={{ marginTop: p(20) }}>
            <YText color={theme.secondText} size={theme.f30}>
              欢迎来到！
            </YText>
          </View>
          <View style={[commonStyle.flexrowcenterarrow, styles.facewrapper]}>
            {dataSource.map((item, index) => {
              return (
                <TouchableOpacity
                  onPress={() => {
                    setCurrent(index);
                  }}
                  activeOpacity={0.9}
                  style={[styles.faceitem]}
                  key={index}
                >
                  <View
                    style={[
                      styles.facebox,
                      current === index ? styles.selectface : null,
                    ]}
                  >
                    <Image source={item.img} style={styles.face} />
                  </View>
                  <YText
                    size={theme.f30}
                    color={theme.mainText}
                    style={styles.facetext}
                    bold={current === index ? true : false}
                  >
                    {item.title}
                  </YText>
                </TouchableOpacity>
              );
            })}
          </View>
          <View style={styles.operation}>
            <YButton
              style={{
                width: p(400),
                height: p(80),
                backgroundColor: "black",
              }}
              titleStyle={{
                color: "white",
              }}
              isGradient={false}
              title="下一步"
            ></YButton>
          </View>
        </View>
      </SafeAreaView>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  pagewrapper: {
    flex: 1,
    padding: p(40),
    marginTop: p(100),
  },
  facebox: {
    backgroundColor: "#FAFBFA",
    paddingHorizontal: p(30),
    paddingTop: p(100),
    borderRadius: p(20),
    borderWidth: 2,
    borderColor: "#FAFBFA",
  },
  selectface: {
    borderColor: "black",
    borderWidth: 2,
    borderRadius: p(20),
  },
  facewrapper: {
    marginTop: p(100),
  },
  faceitem: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  },
  face: {
    width: p(200),
    height: p(200),
  },
  facetext: {
    textAlign: "center",
    marginTop: p(10),
  },
  operation: {
    position: "absolute",
    bottom: p(100),
    left: 0,
    right: 0,
  },
});

export default ChangeSex;
